<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑dubbo服务入参</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="layui-container">

    <h3>填充参数</h3>
    <form class="layui-form" style="margin-top: 2%" lay-skin="line">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>参数名称</th>
                <th>参数类型</th>
                <th>参数值</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="descriptor:${paramDescriptors}">
                <td th:text="${descriptor.name}"></td>
                <td th:text="${descriptor.type}"></td>
                <td th:if="${descriptor.primitive}">
                    <input type="text" th:id="${descriptor.name}" autocomplete="off" placeholder="若可为空则请忽略"
                           class="layui-input value">
                </td>
                <td th:if="${!descriptor.primitive}">
                    <textarea th:id="${descriptor.name}" name="" id="" cols="30" rows="10"
                              placeholder="若可为空则请忽略"></textarea>
                </td>
            </tr>
            </tbody>
        </table>
    </form>

    <h3>选择服务实例</h3>
    <table class="layui-hide" style="font-family: Roboto,serif;font-size: 15px"
           id="serviceListTable" lay-filter="serviceListTable"></table>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/ace/ace.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var clientId = null;

    layui.use([
        'util', 'layer',
        'form',
        'jquery',
        'table'], function () {

        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        table.render({

            elem: '#serviceListTable'
            , id: 'serviceListTable'
            , url: '/restdoc/serviceClient/list'
            , size: 'lg'
            , skin: 'row'
            , cols: [
                [
                    {
                        type: 'radio'
                    },
                    {
                        field: 'applicationType', title: '应用类型'
                    }
                    ,
                    {
                        field: 'service', title: '服务名称'
                    }
                    ,
                    {
                        field: 'remoteAddress', title: '服务远程地址'
                    }
                ]
            ]
        });

        table.on('radio(serviceListTable)', function (obj) {
            clientId = obj.data.remoteAddress;
        });


    });

    function getValue() {
        var param = {};
        var inputs = $('input');
        var text_areas = $('textarea');

        if (inputs != null) {
            for (let i = 0; i < inputs.length; i++) {
                param[inputs[i].id] = inputs[i].value;
            }
        }
        if (text_areas != null) {
            for (let i = 0; i < text_areas.length; i++) {
                param[inputs[i].id] = inputs[i].value;
            }
        }

        param['clientId'] = clientId;
        return param;
    }
</script>

</body>
</html>